import { FC } from "react";
import QuestionCard from "../../../components/QuestionCard";
import styles from "../List/common.module.scss";
import { useTitle } from "ahooks";
import { Empty, Spin, Typography } from "antd";
import ListSearch from "../../../components/ListSearch";
import useLoadQuestionList from "../../../hooks/useLoadQuestionList";
import ListPage from "../../../components/ListPage";

const { Title } = Typography;

const Star: FC = () => {
  useTitle("小可问卷 - 星标问卷");

  const { loading, data = { list: [], total: 0 } } = useLoadQuestionList({
    isStar: true,
  });
  const { list = [], total = 0 } = data;

  return (
    <div>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>星标问卷</Title>
        </div>
        <div className={styles.right}>
          <ListSearch />
        </div>
      </div>
      <div className={styles.content}>
        {loading && (
          <div style={{ textAlign: "center", padding: "10px 0" }}>
            <Spin />
          </div>
        )}
        {!loading && list.length === 0 && <Empty description="暂无数据" />}
        {list.length > 0 &&
          list.map((item: any) => <QuestionCard key={item._id} {...item} />)}
      </div>
      <div className={styles.footer}>
        <ListPage total={total} />
      </div>
    </div>
  );
};

export default Star;
